Navigation bar Guidelines 導航欄指導規則

Usage 用法

導航欄是位於螢幕底部的選單欄，用來幫助使用者快速切換不同的頁面。它最多可以包含五個選項，最少三個選項。使用者可以看到每個選項都有圖示，有些還會顯示文字說明。其中一個選項會始終保持"已選中"的狀態，表示使用者當前所在的頁面。點選任何選項，系統就會跳轉到對應的頁面。

導航欄應用於：

需要在應用程式的任何位置都能訪問的頂級目的地

三到五個目的地

緊湊的視窗尺寸

導航欄不應用於：

單一任務，例如檢視單封郵件

使用者偏好或設定

中等到超大窗戶尺寸

✓ 使用導航欄來放置那些在應用中應時鐘保持易於訪問的目的地

× 不要超過5個，超過5個考慮使用標籤頁或導航抽屜

× 如果圖示在沒有標籤的情況下顯示，謹慎使用，圖示的含義應始終明確且對所有使用者都可以訪問，再需要減少視覺衝擊的特定情況下，可以省略文字

× 避免少於三個目地的導航欄，相反請使用文字標籤

結合導航欄和標籤頁可能會引起混淆，因為他們與內容的關係可能不明確，標籤頁共享一個共同的主題，而導航欄目的地是頂級的且彼此獨立

× 導航位置固定的，他們不會滾動或水平移動

Anatomy 結構

1. Container 2. Icon 3. Label text 4. Active indicator 5. Large badge (optional) 6. Small badge (optional)

Container 容器

導航欄容器容納構成目的地的所有元素，包括圖示、標籤文字和活動指示器。

容器被分為等寬的列，每一列對應一個目的地。每個目的地的寬度可以透過將導航欄的寬度除以目的地的數量來計算。

導航欄分為等寬的列

容器可以填充顏色以與背後的內容區分開來。

✓ 一個充滿顏色的導航欄可以將其與在背後滾動的內容區分開來

× 如果導航欄背後沒有衝突的內容，導航欄可以使用與背景相同的顏色

Icons 圖示

導航欄中的目的地始終包含一個圖示。最好將圖示與文字標籤配對，尤其是當圖示的含義不明顯時。

使用實心圖示表示活動目的地，使用空心圖示表示非活動目的地。

當有填充和輪廓圖示樣式可選時，使用輪廓圖示表示非活動目的地，使用填充圖示表示活動目的地

如果圖示沒有填充版本，加粗的標籤文字和活動填充仍然能提供次要提示。儘可能使用填充圖示。

啟用和非啟用的圖示應與容器有足夠的對比度。

× 不要在導航欄中使用多種顏色或低對比度的顏色，因為這會使使用者難以分辨當前選中的專案並導航到其他目的地

Active indicator 活動指示器

活動指示器是一個背景形狀，用於傳達導航欄中當前顯示的目的地。

✓ 僅對活動目的地使用活動指示器

× 不要同時為多個目的地使用活動指示器

選擇目的地後，活動指示器在其圖示後視覺上擴充套件。這種形狀擴充套件僅限於一個軸。

✓ 沿單一軸動畫化形狀擴充套件，以保持平坦共享平面的感覺

× 不要均勻地動畫形狀擴充套件

Label text 標籤文字

標籤文字用簡短的文字說明每個導航選項的用途。

導航按鈕上的圖示和文字都居中顯示。

標籤文字要用大寫字母，並且要確保文字顏色與背景色形成清晰的對比，方便使用者閱讀。

標籤文字為導航目的地提供簡短描述

✓ 使用簡短的文字標籤來標識目的地的用途。

× 避免換行或截斷文字，因為這會使標籤難以理解

× 避免為了適應單行而縮短較長的文字

Badges (optional) 徽章（可選）

導航欄圖示的右上角可以顯示小標記，比如未讀訊息數這樣的實時更新資訊。

小徽章僅使用形狀太表達變化和新通知

大型徽章會在容器內顯示一個數字，以指示與某個目標相關的可量化狀態變化

A large badge displays a number within a container to indicate a quantifiable status change related to a destination

Placement 放置位置

導航欄可以與浮動操作按鈕（FAB）搭配使用。

✓ FAB可以右對齊在導航上方

× 避免將懸浮操作按鈕（FAB）偏離裝置寬度的中心位置；如果導航目的地數量為奇數，也不要使其偏移。相反，應將偏移的懸浮操作按鈕置於兩個或四個導航目的地之間的中心位置。

導航欄有時會被其他介面元素暫時遮住，比如：彈出的對話方塊、底部選單、側邊導航面板、手機鍵盤
、其他完成任務需要的介面元素。但是要記住：不管在哪個頁面，導航欄都不能被永久遮擋住。

“電臺”螢幕的搜尋功能會觸發螢幕鍵盤，暫時覆蓋底部導航欄，直到搜尋流程完成

Responsive layout 響應式佈局

僅在緊湊視窗尺寸下使用導航欄。

將導航欄替換為更適合大螢幕環境的元件：

中等和擴充套件視窗尺寸下的導航軌道

大和超大視窗尺寸下的標準導航抽屜

導航欄最適合移動裝置和小型平板電腦介面

小螢幕裝置（如手機）：螢幕兩側的空間很小，所以內容會佔滿整個螢幕，導航選單要放在螢幕頂部或底部，這樣既節省空間，又方便使用者點選各個頁面

中等螢幕裝置（如平板電腦）：把主要導航選單移到螢幕左邊，導航選單會固定在那裡不動

大螢幕裝置（如電腦）：使用可以展開收起的側邊導航選單，根據使用者使用習慣，把常用的功能放在更容易找到的位置

Compact window size 緊湊視窗尺寸

導航欄容器在緊湊視窗尺寸下使用 100%的螢幕寬度。

導航欄佔用螢幕寬度的100%

Spacing 間距

在橫向移動螢幕上，導航欄目的地可以保留與縱向模式相同的間距，或者在容器中均勻分佈。

移動裝置橫屏模式下的底部導航欄，目的地之間有額外的間距

Medium and expanded window sizes中等和擴充套件視窗大小

導航欄是為較小的螢幕設計的，不適用於中等至超大視窗尺寸。

× 不要在桌面佈局中使用導航欄，應該改用導航軌道或標籤頁。

Density 密度

始終使用導航欄的預設高度作為最小值。

✓ 保持導航欄的預設高度

× 不要對導航欄應用密度

Behavior 行為

Navigation 導航

點選導航欄上未選中的專案時，應用會切換到新的頁面。

頁面切換後有兩種顯示方式：

記住上次狀態：如果你之前訪問過這個頁面，會顯示你上次離開時的樣子，包括滾動位置、已選擇的標籤和搜尋內容。

重新開始：頁面會回到最初的狀態，之前的滾動位置、選擇的標籤和搜尋內容都會被清除。

根據你的應用特點來選擇合適的方式。比如說，如果使用者需要經常在不同頁面之間切換，最好選擇"記住上次狀態"的方式。

當你點選當前已選中的頁面按鈕時，頁面會自動回到最頂部。

在應用程式層級中向下移動時（從父螢幕到子螢幕），可以持續顯示導航欄，以便快速在應用程式的各個部分之間導航。

Scrolling 滾動

滾動時，導航欄可以顯示或隱藏。

向下滾動可隱藏導航欄，向上滾動則顯示他

Selection 選擇

圖示變為填充狀態，活動指示器從圖示中心擴充套件，當切換目的地時。

當選擇目的地時，活動指示器從目標處展開

當點選目的地時，目的地螢幕使用頂級過渡模式。此外，圖示會被填充，活動指示器從圖示中心展開。

點選目的地使用頂級過渡模式

Don't swipe between destinations不要在目的地之間滑動

在螢幕上滑動不會在目的地之間導航。滑動行為應保留給相關專案，例如輪播中的卡片，或諸如歸檔列表項等操作。

✓ 讓使用者透過選擇來切換目的地

× 避免讓使用者透過滑動手勢來切換目的地

Back 返回

在安卓系統上，一種稱為預測性返回的手勢允許使用者在導航欄上向左或向右滑動。前一螢幕會在預覽中顯示，以指示目的地。

Anatomy 結構

1 Container 2 Icon 3 Active indicator 4 Small badge (optional) 5 Large badge (optional)6
Large badge label (optional)7Label text

Interaction & style 互動與樣式

Touch 觸控

點選導航項後，指示器會立即顯示，讓你知道已選中該項

點選時會出現水波紋效果

圖示會從空心變成實心

圖示顏色會改變：淺色模式下變深，深色模式下變淺

Cursor 游標

滑鼠指標懸停在選項上時，會顯示一個指示標記，告訴你這裡可以點選

點選時會出現波紋動畫效果

選項的圖示會從空心變成實心

圖示顏色會根據主題變化：淺色主題下變深色，深色主題下變淺色

Visual indicators 視覺指示符

圖示是導航狀態的主要提示。使用填充圖示表示選中的目的地，與非選中目的地的輪廓圖示形成對比。

✓ 使用填充圖示來表示選中效果

× 缺少重要視覺指示會失去明確標識

選中時，圖示會填充、變暗，並伴有活動指示器形狀作為背景